<template>
  <div>
    <van-nav-bar
      fixed
      border
      :title="title"
      :left-text="left ? '返回' : ''"
      :left-arrow="left ? true : false"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template v-if="metaHelp" #title>
        <div @click="onhelp">
          <span>
            {{ title }}
          </span>
          <van-icon name="question-o" size="18" />
        </div>
      </template>

      <template v-if="right" #right>
        <van-icon :name="right.icon || 'setting-o'" size="18" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
// import { Toast } from 'vant'

import api from '@/api'
import { Dialog } from 'vant'

export default {
  name: 'Header',
  components: {},
  directives: {},
  filters: {},
  props: {
    title: { type: String, default: '.' },
    left: { type: Boolean, default: true },
    right: { type: Object, default: () => undefined },
    help: { type: Boolean, default: true }
    // help: { type: Function, default: undefined }
  },

  data() {
    return {
      metaHelp: true
    }
  },

  computed: {},

  watch: {
    help(to, from) {
      // console.log('header help', to, from)
      // console.log('header help', this.$store.state.header)
      // this.$store.dispatch('header/set', to.meta)
      // location.reload()
    },
    $route(to, from) {
      // console.log('header $route', to, from)
      this.metaHelp = to.meta.help === undefined ? true : to.meta.help
      // console.log('header $route', to.meta, this.$store.state.header)

      // this.$store.dispatch('header/set', to.meta)

      // location.reload()
    }
  },

  async created() {},

  methods: {
    onhelp() {
      if (this.help2) {
        this.help2()
      } else {
        // console.log('onhelp', this.$route)
        // console.log('onhelp query', this.$route.query.model)

        const model = this.$route.query.model

        let modelHelp = ''

        if (model) {
          const Model = api.env(model)
          const metadata = Model.metadata || {}
          modelHelp = metadata.help || ''
          // console.log('onhelp metadata, help', model, modelHelp)
        }

        const msg =
          '这里显示该页面的一些操作帮助信息. 通常页面左上角为返回按钮. \n右上角有操作按钮, 列表页面是新增按钮, 详情页面是编辑按钮.'

        Dialog.alert({
          title: '帮助',
          message: `${msg}\n\n${modelHelp}`,
          closeOnClickOverlay: true
        })
      }
    },

    onClickLeft() {
      // Toast('返回')
      if (this.left) {
        this.$router.back()
      }
    },
    onClickRight() {
      // Toast('按钮')
      // console.log('onClickRight', this.right)
      if (this.right) {
        console.log('onClickRight,', this.right)

        if (this.right.fn) {
          this.right.fn()
        } else {
          const path = this.right.query
            ? { path: this.right.path, query: this.right.query }
            : this.right.path
          this.$router.push(path)
        }
      }
    }
  }
}
</script>

<style type="text/css"></style>
